<template>
  <div class="main">
    <template v-if="patient">
    <div class="detail-item">
      <el-row>
        <el-col :span="10" class="detail-item-label">姓名:</el-col>
        <el-col :span="14" class="detail-item-content">{{patient.Name}}</el-col>
      </el-row>
    </div>
    <div class="detail-item">
      <el-row>
        <el-col :span="10" class="detail-item-label">账户余额:</el-col>
        <el-col :span="14" class="detail-item-content">{{patient.Balance}}</el-col>
      </el-row>
    </div>
    <div class="detail-item">
      <el-row>
        <el-col :span="10" class="detail-item-label">性别:</el-col>
        <el-col :span="14" class="detail-item-content">{{patient.Sex}}</el-col>
      </el-row>
    </div>
    <div class="detail-item">
      <el-row>
        <el-col :span="10" class="detail-item-label">年龄:</el-col>
        <el-col :span="14" class="detail-item-content">{{patient.Age}}</el-col>
      </el-row>
    </div>
    <div class="detail-item">
      <el-row>
        <el-col :span="10" class="detail-item-label">身份证号码:</el-col>
        <el-col :span="14" class="detail-item-content">{{patient.IdCardNo}}</el-col>
      </el-row>
    </div>
    <div class="detail-item" v-if="patient.IcCardNo">
      <el-row>
        <el-col :span="10" class="detail-item-label">社保卡号:</el-col>
        <el-col :span="14" class="detail-item-content">{{patient.IcCardNo}}</el-col>
      </el-row>
    </div>
    <div class="detail-item" v-if="patient.Address">
      <el-row>
        <el-col :span="10" class="detail-item-label">地址:</el-col>
        <el-col :span="14" class="detail-item-content">{{patient.Address}}</el-col>
      </el-row>
    </div>
    </template>
  </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import BaseMixin from '@/mixins/base'
import { GetUser } from '@/apis/api'
import { IPatient } from '@/interface/common'

@Component
export default class Detail extends mixins(BaseMixin) {
  private patient : IPatient = {}
  private async created () {
    this.client = this.store.state.client
    this.setTip('您的档案信息:')
    this.setMaxTime(30)
    this.logger.info('打开查询页面')
    this.updateTimeHandler('home')
    if (this.store.state.patient) {
      const result = await GetUser(this.store.state.patient)
      if (result.data?.Code === 200) {
        this.patient = result.data.Data
        this.store.commit('updatePatient', result.data.Data)
      }
    }
  }
}
</script>

<style scoped>
  .main{
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
  }
  .detail-item{
    width: 100%;
    font-size: 2.5rem;
    line-height: 5rem;
  }
  .detail-item-label{
    text-align: right;
    color: gray;
    padding-right: 1rem;
  }
  .detail-item-content{
    text-align: left;
  }
</style>
